<template>
  <div class="shuttle">
    <!--源数据-->
    <div class="">
      <div class="panel">
        <div class="panel-title">
          <!-- 全选功能 -->
          <input type="checkbox" v-model="checkAll" @change="checkAllChange" />
          <!-- 模糊匹配 -->
          <input type="text" placeholder="请输入内容" v-model="searchInput" />
          <span class="pull-right">{{ selectedNum(searchData) }}/{{ searchData.length }}</span>
        </div>
        <div class="panel-body">
          <ul>
            <li v-for="(v, i) in searchData" :key="i">
              <label> <input type="checkbox" v-model="v.check" @change="checkChagne" />{{ v.title }} </label>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--按钮-->
    <div class="button-btn">
      <button class="btn">向左 ←</button>
      <button class="btn" @click="toRight">向右 →</button>
    </div>
    <!--目标数据-->
    <div class="">
      <div class="panel">
        <div class="panel-title">
          <span class="pull-right">{{ selectedNum(rigthData) }}/{{ rigthData.length }}</span>
        </div>
        <div class="panel-body">
          <ul>
            <li v-for="(v, i) in rigthData">
              <label> <input type="checkbox" v-model="v.check" />{{ v.title }} </label>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const leftData = ref([
  { title: "苹果", check: true },
  { title: "香蕉", check: false },
  { title: "火龙果", check: false },
  { title: "车厘子", check: true },
  { title: "西瓜", check: false },
  { title: "香瓜", check: false },
  { title: "香梨", check: false },
  { title: "猕猴桃", check: false },
  { title: "桃子", check: false },
]);

const rigthData = ref([]);
const checkAll = ref(false);
const checkAllChange = () => {
  leftData.value.forEach((v) => (v.check = checkAll.value));
};
const checkChagne = () => {
  // checkAll.value = leftData.value.every((v) => v.check);
  checkAll.value = leftData.value.filter((v) => v.check).length === leftData.value.length;
};

const searchInput = ref("");
const searchData = computed(() => {
  return leftData.value.filter((v) => v.title.includes(searchInput.value));
});

const toRight = () => {
  rigthData.value = leftData.value.filter((v) => v.check);
  leftData.value = leftData.value.filter((v) => !v.check);
};

const selectedNum = computed(() => (data) => data.filter((v) => v.check).length);
</script>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.shuttle {
  width: 800px;
  margin: 0 auto;
}
.panel {
  width: 300px;
  border: 1px solid #333;
  border-radius: 5px;
  height: 300px;
}
.panel-title {
  padding: 10px;
  background: #f7f7f7;
  border-bottom: 1px solid #333;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 20px;
}
.panel-title input[type="text"] {
  border: none;
  background: none;
}
.panel-title .pull-right {
  float: right;
}
.shuttle {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.button-btn .btn {
  display: block;
  margin: 10px 0;
}
</style>
